<template>
  <el-form ref="form" :model="form" label-width="80px">
    <!-- 标题 -->
    <el-form-item label="标题">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <!-- 富文本组件 -->
    <el-form-item label="内容">
      <vue-editor
        :useCustomImageHandler="true"
        @image-added="imgUpload"
        v-model="form.content"
      ></vue-editor>
    </el-form-item>
    <!-- 多选框栏目 -->
    <el-form-item label="栏目">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          :label="item.id"
          v-for="item in categorrieslist"
          :key="item.id"
          >{{ item.name }}</el-checkbox
        >
      </el-checkbox-group>
    </el-form-item>
    <!-- 图像上传组件  -->
    <el-form-item label="上传">
      <el-upload
        action="http://127.0.0.1:3000/upload"
        :headers="{
          Authorization: 'Bearer ' + token,
        }"
        list-type="picture-card"
        :file-list="form.cover"
        :on-success="success"
        :on-remove="remove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>
    <!-- 类型单选 -->
    <el-form-item label="类型">
      <el-radio-group v-model="form.type">
        <el-radio :label="1">文章</el-radio>
        <el-radio :label="2">视频</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 发布文章控件 -->
    <el-row>
      <el-button type="primary" v-if="!$route.query.id" @click="Submit"
        >发布</el-button
      >
      <el-button type="primary" v-else @click="Submit">修改</el-button>
    </el-row>
  </el-form>
</template>

<script>
// 引入富文本组件
import { VueEditor } from "vue2-editor";
export default {
  components: {
    VueEditor,
  },
  data () {
    return {
      token: localStorage.getItem("token"),
      categorrieslist: [],
      checkList: [],
      form: {
        title: "",
        content: "",
        categories: [],
        cover: [],
        type: 1,
      },
    };
  },
  //监听,当多选框选中一个时,赋值到form.categories
  watch: {
    checkList () {
      console.log(this.checkList);
      this.form.categories = this.checkList.map((item) => {
        return { id: item };
      });
    },
  },
  methods: {
    // 富文本框
    //参1它传递要处理的文件，但是您需要
    //参2编辑器实例
    //参3上载时的光标位置，以便成功时可以将图像插入正确的位置
    //参4resetUploader 这是上传完图片用来重新初始化上传功能的函数
    imgUpload (file, Editor, cursorLocation, resetUploader) {
      var formData = new FormData();
      formData.append("file", file);
      this.$axios({
        url: "/upload",
        method: "post",
        data: formData,
      }).then((res) => {
        console.log(res);
        // 2. 拿到图片地址
        // 要放入富文本框当中
        // Editor.insertEmbed() 这是编辑器自带函数, 可以往编辑框内放入内容,因为自定义,上传富文本已经不会默认显示,所以没有这个的话,是图片显示不出来
        // 三个参数 位置 / 类型 / 内容
        Editor.insertEmbed(
          cursorLocation,
          "image",
          this.$axios.defaults.baseURL + res.data.data.url
        );
        // 将图片插入到富文本框之后还要重置上传功能
        resetUploader();
      });
    },

    //上传成功
    success (response, file) {
      // response 请求结果
      // file 文件本身
      // fileList 文件列表
      // console.log(response.data.id);
      file.id = response.data.id;
      //,虽然请求要的只是id,但只会取有用的数据,所以用file也可以,不仅仅用发送,还用于渲染组件一个数据表
      this.form.cover.push(file);
      console.log(file);
    },

    // 删除成功
    remove (file, fileList) {
      console.log("删除");
      // console.log(fileList);
      //文件列表更新,可以将删除后更新的fileList传给this.form.cover
      this.form.cover = fileList;
    },

    // 发布控件
    Submit () {
      if (!this.$route.query.id) {
        console.log(this.form);
        this.$axios({
          url: "/post",
          method: "post",
          data: this.form,
        }).then((res) => {
          // console.log(res);
          this.$router.push("/ArticleList");
        });
      } else {
        this.$axios({
          url: "/post_update/" + this.$route.query.id,
          method: "POST",
          data: this.form,
        }).then((res) => {
          console.log(res);
          this.$router.push("/ArticleList");
        });
      }
    },
  },

  mounted () {
    // 对多选栏目渲染
    this.$axios({
      url: "/category",
    }).then((res) => {
      // console.log(res.data.data);
      var categorrieslist = res.data.data.filter((item) => {
        return item.id != 0 && item.id != 999;
      });
      this.categorrieslist = categorrieslist;
      console.log(this.categorrieslist);
    });

    // 修改进来的文章详情
    if (this.$route.query.id) {
      this.$axios({
        url: "/post/" + this.$route.query.id,
      }).then((res) => {
        console.log(res.data);
        this.form.title = res.data.data.title;
        this.form.content = res.data.data.content;
        this.checkList = res.data.data.categories.map((item) => {
          return item.id;
        });
        const newCover = res.data.data.cover.map((img) => {
          const newImg = { ...img };
          if (newImg.url.indexOf("http") == -1) {
            newImg.url = this.$axios.defaults.baseURL + newImg.url;
          }
          //每次获取旧图片时,数据中没有uid属性,组件会自动生成一个uid数据1,uid相同会冲突,id是唯一的所以
          newImg.uid = newImg.id;
          return newImg;
        });
        this.form.cover = newCover;
        // 兼容旧的测试数据, 由于带有富文本框不支持的 div 标签
        // 所以需要替换成 p
        this.form.content = res.data.data.content.replace(/div/g, "p");
        this.form.type = res.data.data.type;

        // //另一种方法是this.form=res.data.data,因为获取总是获取需要的数据,不需要的会哭略,发请求数据也是,多其他属性也没事,只拿需要的数据,但
        // this.checkList = res.data.data.categories.map(item => {
        //   return item.id;
        // });
        // const newCover = res.data.data.cover.map(img => {
        //   const newImg = { ...img };
        //   if (newImg.url.indexOf("http") == -1) {
        //     newImg.url = this.$axios.defaults.baseURL + newImg.url;
        //   }
        //   return newImg; //这是最后真正item传给var newCover
        // });
        // res.data.data.cover = newCover;
        // this.form = res.data.data;
        // // 这两步是要做的
      });
    }
  },
};
</script>
<style lang="less" scoped>
.el-row {
  text-align: center;
}
</style>